import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { start, registerMicroApps, initGlobalState } from 'qiankun';
import { BrowserRouter } from 'react-router-dom';

// 初始化全局状态
const initialState = { user: { name: 'John Doe' } };
const initialStateObj = {
  user: {
    name: 'John Doe',
  },
  message: '',
};

const actions = initGlobalState(initialStateObj);

// 监听全局状态变化
actions.onGlobalStateChange((state, prev) => {
  console.log('主应用监听到全局状态变化:', state, prev);
});
const apps = [
  {
    name: 'sub-react', // 子应用的名称
    entry: '//localhost:3002', // 默认会加载这个路径下的html，解析里面的js
    activeRule: '/sub-react', // 匹配的路由
    container: '#sub-app', // 加载的容器
    props: { initialState, actions }, // *将全局状态 actions 传递给子应用
  },
  {
    name: 'sub-vue', // 子应用的名称
    entry: '//localhost:3001', // 默认会加载这个路径下的html，解析里面的js
    activeRule: '/sub-vue', // 匹配的路由
    container: '#sub-app', // 加载的容器
    props: { initialState, actions },
  },
  {
    name: 'sub-umi', // 子应用的名称
    entry: '//localhost:3005', // 默认会加载这个路径下的html，解析里面的js
    activeRule: '/sub-umi', // 匹配的路由
    container: '#sub-app', // 加载的容器
  },
];

registerMicroApps(apps);
start();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
